<template>
  <view class="weather-page">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="title">泉州天气预报</text>
    </view>

    <!-- 天气概览区域（点击展开详情） -->
    <view class="weather-overview" @click="toggleDetail">
      <view class="overview-left">
        <text v-if="loading" class="loading">加载中...</text>
        <text v-else-if="error" class="error">天气获取失败</text>
        <view v-else class="overview-info">
          <text class="city">泉州</text>
          <text class="temp">{{ today.tempRange }}</text>
          <text class="weather">{{ today.weather }}</text>
          <text class="pm25">PM2.5 {{ pm25 }}</text>
        </view>
      </view>
      <view class="overview-right">
        <image :src="isDetail ? '/static/up.png' : '/static/down.png'" class="arrow" />
      </view>
    </view>

    <!-- 天气详情区域（展开时显示） -->
    <view class="weather-detail" v-if="isDetail && !loading && !error">
      <!-- 今日详细信息 -->
      <view class="detail-section">
        <text class="section-title">今日详情</text>
        <view class="detail-list">
          <view class="detail-item">
            <text class="item-label">日期</text>
            <text class="item-value">{{ today.date }}</text>
          </view>
          <view class="detail-item">
            <text class="item-label">风向风力</text>
            <text class="item-value">{{ today.wind }}</text>
          </view>
          <view class="detail-item">
            <text class="item-label">空气质量</text>
            <text class="item-value">{{ quality }}</text>
          </view>
          <view class="detail-item">
            <text class="item-label">湿度</text>
            <text class="item-value">{{ humidity }}%</text>
          </view>
        </view>
      </view>

      <!-- 未来6天预报 -->
      <view class="detail-section">
        <text class="section-title">未来6天预报</text>
        <view class="forecast-list">
          <view class="forecast-item" v-for="(day, index) in forecastList" :key="index">
            <text class="day-date">{{ day.date }}</text>
            <text class="day-weather">{{ day.weather }}</text>
            <text class="day-temp">{{ day.tempRange }}</text>
            <text class="day-wind">{{ day.wind }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: false,
      isDetail: false,
      today: {},
      pm25: '',
      quality: '',
      humidity: '',
      forecastList: []
    };
  },
  onLoad() {
    this.fetchWeather();
  },
  methods: {
    fetchWeather() {
      this.loading = true;
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501', // 泉州城市代码
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            const data = res.data.data;
            this.pm25 = data.pm25;
            this.quality = data.quality;
            this.humidity = data.shidu;
            this.today = {
              date: data.forecast[0].date,
              tempRange: `${data.forecast[0].low}~${data.forecast[0].high}`,
              weather: data.forecast[0].type,
              wind: `${data.forecast[0].fengxiang} ${data.forecast[0].fengli}`
            };
            this.forecastList = data.forecast.slice(1, 7); // 未来6天
          } else {
            this.error = true;
            uni.showToast({ title: '数据异常', icon: 'none' });
          }
        },
        fail: (err) => {
          this.error = true;
          uni.showToast({ title: '请求失败', icon: 'none' });
          console.error(err);
        },
        complete: () => {
          this.loading = false;
        }
      });
    },
    toggleDetail() {
      if (!this.loading && !this.error) {
        this.isDetail = !this.isDetail;
      }
    }
  }
};
</script>

<style scoped>
.weather-page {
  padding: 30rpx;
  background-color: #fff;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.weather-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #DD524D;
  color: #fff;
  border-radius: 12rpx;
  cursor: pointer;
}

.overview-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.city {
  font-size: 32rpx;
  font-weight: bold;
}

.temp {
  font-size: 28rpx;
}

.weather {
  font-size: 28rpx;
}

.pm25 {
  font-size: 24rpx;
  opacity: 0.9;
}

.loading, .error {
  font-size: 28rpx;
}

.arrow {
  width: 32rpx;
  height: 32rpx;
}

.weather-detail {
  margin-top: 20rpx;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.detail-item {
  width: calc(50% - 10rpx);
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
}

.item-label {
  color: #666;
}

.item-value {
  color: #333;
}

.forecast-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.forecast-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
}

.forecast-item:last-child {
  border-bottom: none;
}

.day-date {
  font-size: 24rpx;
  color: #666;
}

.day-weather {
  font-size: 26rpx;
  color: #333;
}

.day-temp {
  font-size: 26rpx;
  color: #333;
}

.day-wind {
  font-size: 24rpx;
  color: #666;
}
</style>